<template>
  <div class="table-wrapper" v-cloak>
    <div class="functional-btn-box">
      <div class="operate-btn-group tree-btn-group" v-if="isNeedTree && isNeedTree !== 'false'" v-show="isShowTree">
        <a class="ake_btn ake_btn_blue ake_btn_show_tree" @click.prevent="toggleTreeBox">
          <i class="btn-icon btn-icon-left"></i>
          <span>{{selectedNode || '请选择停车场'}}</span>
          <i class="btn-icon btn-icon-right el-icon-arrow-down"></i>
        </a>
      </div>
      <slot name="operateBtnGroup">
        <div class="operate-btn-group">
        </div>
      </slot>
      <div class="operate-btn-group standard-btn-group">
        <a href="javascript:;" class="ake_btn ake_btn_green ake_btn_text" @click.stop="toPrintTable" v-if="isNeedPrint && isNeedPrint !== 'false'">打印</a>
      </div>

      <div class="table-btn-group">
        <a href="javascript:;" class="setting-btn" @click.stop="toggleSettingFn()" v-if="isSetTable && isSetTable !== 'false'">
        </a>
        <transition name="scale">
          <div class="table-setting-box scale-box" v-show="isShowSetting">
            <div class="setting-scroll-box">
              <ul>
                <template v-for="(item, index) in theadsArr">
                  <li :key="index" :class="[item.prop == 'reno' ? 'hidden' : '', item.isMultiHeader ? 'has-second-stage' : '']" :fixed="fixedCols > 1 && index + 1 < fixedCols ? 'left' : 'false'">
                    <div class="operation-line" @mouseenter="showOperation(index)" @mouseleave="hideOperation(index)">
                      <label v-if="!isReload">
                        <input type="checkbox" class="icheck-icon" :checked="item.checked" @click.prevent.stop="displayColumnFn(index, item.checked)">
                        {{item.idx !== undefined ? item.text + item.idx : item.text}}
                      </label>
                      <span class="operate-btn-box" v-if="item.isShow">
                        <i class="ion-arrow-up-c light-green" aria-hidden="true" title="前进" @click.stop="moveColumnFn(index,1)"></i>
                        <i class="ion-arrow-down-c light-green" aria-hidden="true" title="后退" @click.stop="moveColumnFn(index,0)"></i>
                      </span>
                    </div>
                    <ul v-if="item.isMultiHeader" class="second-header">
                      <li v-for="(li, i) in item.children" :key="i">
                        <div class="operation-line" @mouseenter="showOperation(index, i)" @mouseleave="hideOperation(index, i)">
                          <label v-if="!isReload">
                            <input type="checkbox" class="icheck-icon" :checked="li.checked" @click.prevent.stop="displayColumnFn(index, li.checked, i)">
                            {{li.idx !== undefined ? li.text + li.idx : li.text}}
                          </label>
                          <span class="operate-btn-box" v-if="li.isShow">
                            <i class="ion-arrow-up-c light-green" aria-hidden="true" title="前进" @click.stop="moveColumnFn(index,1,i)"></i>
                            <i class="ion-arrow-down-c light-green" aria-hidden="true" title="后退" @click.stop="moveColumnFn(index,0,i)"></i>
                          </span>
                        </div>
                      </li>
                    </ul>
                  </li>
                </template>
              </ul>
            </div>
          </div>
        </transition>
      </div>
    </div>
    <div :id="tableId" class="table-box table-responsive">
      <template v-if="!isReload">
        <el-table :data="tbodysInfo" border stripe :default-sort="{prop: orderBy, order: orderTy}" :max-height="maxHeight || undefined" @selection-change="handleSelectionChange" @sort-change="handleSortChange">
          <div slot="empty">
            <img src="../../assets/img/ic_notopend_addvaule_gray.svg" alt="">
            <span>{{emptyText}}</span>
          </div>
          <el-table-column type="selection" width="32" fixed class-name="selection-td" v-if="hasCheckboxCol && hasCheckboxCol !== 'false'">
          </el-table-column>
          <slot name="tdCell" v-for="oneTh in theadsArr" v-if="oneTh.checked" :item="oneTh" :label="oneTh.text" :min-width="oneTh.minWidth || 38" :width="oneTh.width" :prop="oneTh.prop" :sortable="oneTh.sortable ? false : false" :isMultiHeader="oneTh.isMultiHeader" :children="oneTh.children"></slot>
          <slot name="operateCell" fixed="right" label="操作"></slot>
        </el-table>
      </template>
    </div>

    <div id="printingTable" style="display: none"></div>
  </div>
</template>

<script>
import common from "@mixins/common.js";

import data from "@mixins/tables/data.js";
import watch from "@mixins/tables/watch.js";
import basicTable from "@mixins/tables/basicTable.js";
import saveTable from "@mixins/tables/saveTable.js";
import setTable from "@mixins/tables/setTable.js";

export default {
  mixins: [common, data, watch, saveTable, basicTable, setTable],
  data() {
    return {};
  },
  mounted() {},
};
</script>

